<template>
  <el-button type="primary" @click="startRecord" style="width: 155px">
    录制<span v-if="!disabledEnd">（{{ countTime }}）</span>
  </el-button>
</template>

<script>
import { zeroFill } from '@/utils/index.js'

const MAX_RECORD_SECONDS = 7200 // 最长录制时间
export default {
  name: 'countDownButton',
  data() {
    return {
      disabledEnd: true,
      countTime: '00:00:00',
      timer: null
    }
  },
  methods: {
    startRecord() {
      // this.startTiming()
      this.$emit('start')
    },
    startTiming() { // 计时
      if (!this.disabledEnd) {
        return
      }
      this.disabledEnd = false
      const startTime = Math.floor(Date.now() / 1000)
      this.timer = setInterval(() => {
        const seconds = Math.floor(Date.now() / 1000) - startTime
        const hours = zeroFill(Math.floor(seconds / 3600))
        const minutes = zeroFill(Math.floor((seconds % 3600) / 60))
        const remainingSeconds = zeroFill((seconds % 60))
        this.countTime = `${hours}:${minutes}:${remainingSeconds}`
        if (seconds > MAX_RECORD_SECONDS) {
          this.$notify({
            title: '提示',
            message: '录制时长最长2小时，超出2小时后会自动关闭录制',
            duration: 5000
          })
          this.$emit('end')
          this.init()
        }
      }, 166)
    },
    save() {
      this.init()
    },
    init() {
      this.disabledEnd = true
      this.countTime = '00:00:00'
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style>

</style>
